eslint-plugin-playwright

What is eslint-plugin-playwright?

eslint-plugin-playwright is an ESLint plugin that provides linting rules specific to Playwright, a Node.js library for browser automation. This plugin helps ensure best practices and code quality when writing tests with Playwright.

What are eslint-plugin-playwright's main functionalities?

No Page Pause

This rule disallows the use of `page.pause()` in your Playwright tests to prevent unintended pauses during test execution.

module.exports = {
  plugins: ['playwright'],
  rules: {
    'playwright/no-page-pause': 'error'
  }
};

No Element Handle

This rule discourages the use of `elementHandle` in favor of using locators, which are more robust and easier to work with.

module.exports = {
  plugins: ['playwright'],
  rules: {
    'playwright/no-element-handle': 'error'
  }
};

No Wait For Timeout

This rule prevents the use of `page.waitForTimeout()` to avoid flaky tests caused by arbitrary wait times.

module.exports = {
  plugins: ['playwright'],
  rules: {
    'playwright/no-wait-for-timeout': 'error'
  }
};

Other packages similar to eslint-plugin-playwright

eslint-plugin-jest

eslint-plugin-jest provides linting rules specific to Jest, a popular JavaScript testing framework. It helps enforce best practices and code quality in Jest tests. While eslint-plugin-playwright focuses on Playwright-specific rules, eslint-plugin-jest is tailored for Jest.

eslint-plugin-cypress

eslint-plugin-cypress offers linting rules for Cypress, another end-to-end testing framework. It ensures best practices and code quality in Cypress tests. Similar to eslint-plugin-playwright, but for Cypress instead of Playwright.

eslint-plugin-testing-library

eslint-plugin-testing-library provides linting rules for Testing Library, a set of utilities for testing UI components. It helps ensure best practices and code quality when using Testing Library. While eslint-plugin-playwright is for Playwright, this plugin is for Testing Library.

README

ESLint Plugin Playwright

ESLint plugin for your Playwright testing needs.

Installation

Yarn

yarn add -D eslint-plugin-playwright

NPM

npm install -D eslint-plugin-playwright

Usage

This plugin bundles two configurations to work with both @playwright/test or jest-playwright.

With Playwright test runner

{
  "extends": ["plugin:playwright/playwright-test"]
}

With Jest Playwright

{
  "extends": ["plugin:playwright/jest-playwright"]
}

Rules

missing-playwright-await 🔧

Identify false positives when async Playwright APIs are not properly awaited.

Example

Example of incorrect code for this rule:

expect(page).toMatchText("text");

test.step("clicks the button", async () => {
  await page.click("button");
});

Example of correct code for this rule:

await expect(page).toMatchText("text");

await test.step("clicks the button", async () => {
  await page.click("button");
});

Options

The rule accepts a non-required option which can be used to specify custom matchers which this rule should also warn about. This is useful when creating your own async expect matchers.

{
  "playwright/missing-playwright-await": [
    "error",
    { "customMatchers": ["toBeCustomThing"] }
  ]
}

no-page-pause

Prevent usage of page.pause().

Example

Example of incorrect code for this rule:

await page.click('button');
await page.pause();

Example of correct code for this rule:

await page.click('button');

no-element-handle

Disallow the creation of element handles with page.$ or page.$$.

Examples of incorrect code for this rule:

// Element Handle
const buttonHandle = await page.$('button');
await buttonHandle.click();

// Element Handles
const linkHandles = await page.$$('a');

Example of correct code for this rule:

const buttonLocator = page.locator('button');
await buttonLocator.click();

no-eval

Disallow usage of page.$eval and page.$$eval.

Examples of incorrect code for this rule:

const searchValue = await page.$eval('#search', el => el.value);

const divCounts = await page.$$eval('div', (divs, min) => divs.length >= min, 10);

await page.$eval('#search', el => el.value);

await page.$$eval('#search', el => el.value);

Example of correct code for this rule:

await page.locator('button').evaluate(node => node.innerText);

await page.locator('div').evaluateAll((divs, min) => divs.length >= min, 10);

no-focused-test

Disallow usage of .only() annotation

Examples of incorrect code for this rule:

test.only('focus this test', async ({ page }) => {});

test.describe.only('focus two tests', () => {
  test('one', async ({ page }) => {});
  test('two', async ({ page }) => {});
});

test.describe.parallel.only('focus two tests in parallel mode', () => {
  test('one', async ({ page }) => {});
  test('two', async ({ page }) => {});
});

test.describe.serial.only('focus two tests in serial mode', () => {
  test('one', async ({ page }) => {});
  test('two', async ({ page }) => {});
});

Examples of correct code for this rule:

test('this test', async ({ page }) => {});

test.describe('two tests', () => {
  test('one', async ({ page }) => {});
  test('two', async ({ page }) => {});
});

test.describe.parallel('two tests in parallel mode', () => {
  test('one', async ({ page }) => {});
  test('two', async ({ page }) => {});
});

test.describe.serial('two tests in serial mode', () => {
  test('one', async ({ page }) => {});
  test('two', async ({ page }) => {});
});

no-wait-for-timeout

Disallow usage of page.waitForTimeout().

Example of incorrect code for this rule:

await page.waitForTimeout(5000);

Examples of correct code for this rule:

// Use signals such as network events, selectors becoming visible and others instead.
await page.waitForLoadState();

await page.waitForUrl('/home');

await page.waitForFunction(() => window.innerWidth < 100);

no-skipped-test

Disallow usage of the .skip() annotation.

Examples of incorrect code for this rule:

test.skip('skip this test', async ({ page }) => {});

test.describe.skip('skip two tests', () => {
  test('one', async ({ page }) => {});
  test('two', async ({ page }) => {});
});

test.describe('skip test inside describe', () => {
  test.skip();
});

test.describe('skip test conditionally', async ({ browserName }) => {
  test.skip(browserName === 'firefox', 'Working on it');
});

Examples of correct code for this rule:

test('this test', async ({ page }) => {});

test.describe('two tests', () => {
  test('one', async ({ page }) => {});
  test('two', async ({ page }) => {});
});

no-force-option

Disallow usage of the { force: true } option.

Examples of incorrect code for this rule:

await page.locator('button').click({ force: true });

await page.locator('check').check({ force: true });

await page.locator('input').fill('something', { force: true });

Examples of correct code for this rule:

await page.locator('button').click();

await page.locator('check').check();

await page.locator('input').fill('something');